<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/customer_center.css">
    <link rel="stylesheet" href="../css/order_details.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/preferential.css">
    <link rel="stylesheet" href="../css/order_all.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>

</head>
<body>
<!--头部导航-->
<div class="header">
    <!-- header-top -->
    <div class="header-top">
        <div class="middle">
            <ul class="right">
                <a href="javascript:void(0)">帮助中心</a><span>|</span>
                <a href="javascript:void(0)">400-321-2202</a><span>|</span>
                <p href="javascript:void()">微信</p>
            </ul>
            <ul class="left">
                <a href="javascript:void(0)">登陆</a><span>|</span>
                <a href="javascript:void(0)">注册</a><span>|</span>
                <p class="name" >我的随行</p>
            </ul>
        </div>
    </div>
    <!-- header-navigation -->
    <div class="header-navigation">
        <div class="middle">
            <!-- log -->
            <div class="header-img">
                <img src="../images/header-logo.PNG" alt="" style="height: 86px;">
            </div>
            <div class="header-nav">
                <li><a href="../index.html" class="header-word">首页</a><span></span></li>
                <li><a href="../car_rental/car_filter.html"  class="header-word">去租车</a><span></span></li>
                <li><a href="../car_rental/car_select.html"  class="header-word">车型查询</a><span></span></li>
                <li><a href="../network/businessoutlets.html"  class="header-word">网点导航</a><span></span></li>
                <li><a href="../customer/customer_center.html"  class="header-word">个人中心</a><span></span></li>
                <li><a href="../preferential/special_models.html" class="header-word">特价优惠</a><span></span></li>
                <li><a href="../customer/mycollect.html" class="header-word">我的收藏</a><span></span></li>

            </div>
        </div>
    </div>
</div>

<!--个人中心 main-->
<div id="content">
    <div class="content-bd">


       <!--左侧导航-->
        <div class="con-left">
            <div class="sub-nav">
                <dt id="exchange1">个人中心</dt>
                <dd>
                    <a class="ck cc-change" id="exchange-info1">用户信息</a>
                </dd>
                <dd>
                    <a class="cc-change" id="exchange-info2">修改信息</a>
                </dd>
                <dd>
                    <a class="cc-change" id="exchange-info3">修改密码</a>
                </dd>
                <dt id="exchange2">我的资产</dt>
                <dd>
                    <a class="cc-change" id="exchange-info4">我的优惠券</a>
                </dd>
                <dd>
                    <a class="cc-change" id="exchange-info5">订单管理</a>
                </dd>
            </div>
        </div>

        <!--右侧内容-->
        <div class="col-main">
            <!--用户信息-->
            <div class="information" id="info1">
                <h2>用户信息</h2>
                <div class="mod information-index">
                    <div class="ui-bfc information-index-panel">
                        <!--头像暂定-->
                        <div class="ui-bfc-hd hd">
                            <img src="../images/customer_photo.png" width="99" height="99">

                        </div>
                        <!-- 个人信息-->
                        <div class="ui-bfc-bd bd">
                            <table width="100%">
                                <tbody>

                                <tr>
                                    <td class="cell-title">用户名：</td>
                                    <td>
                                        <p>穿靴子的猫</p>
                                    </td>
                                </tr>


                                    <tr>
                                        <td class="cell-title">电子邮箱：</td>
                                        <td>
                                            <p>448619713@qq.com</p>
                                            <span class="gray">(未验证)</span>
                                            <a>修改</a>
                                        </td>

                                    </tr>

                                    <tr>
                                        <td class="cell-title">手机号码：</td>
                                        <td>
                                            <p>18816291187</p>
                                            <span class="gray">(未验证)</span>
                                            <a>修改</a>
                                        </td>
                                    </tr>

                                <tr>
                                    <td class="cell-title">身份证：</td>
                                    <td>
                                        <p></p>
                                        <span class="gray">(未验证)</span>
                                        <a>立即认证</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="cell-title">真实姓名：</td>
                                    <td>
                                        <p>***</p>
                                    </td>
                                </tr>

                                <tr>
                                    <td class="cell-title">生日：</td>
                                    <td>
                                        <p> </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="cell-title">性别：</td>
                                    <td>
                                        <p> </p>
                                    </td>
                                </tr>

                                    <!--<tr>
                                        <td colspan="2">
                                            <div class="dashed-border"></div>
                                        </td>
                                    </tr>-->


                                </tbody>

                            </table>

                        </div>
                    </div>

                    <div class="operate-panel">
                        <a class="ui-btn ui-btn-white-l">修改信息</a>
                    </div>

                </div>
            </div>

            <!--修改密码-->
            <div class="information hide" id="info2">
                <h2>修改密码</h2>
                <div class="mod information-changepassword">
                    <form id="myForm" method="post">
                        <table width="100%">
                            <tr>
                                <td class="cell-title" width="35%">原密码：</td>
                                <td width="65%" style="position:relative">
                                    <input data-val="true" data-val-required="请输入原始密码" id="OldPassword" maxlength="18" name="OldPassword" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" placeholder="请输入原密码" type="password" />
                                    <em>*</em><span></span>

                                </td>
                            </tr>
                            <tr>
                                <td class="cell-title">新密码：</td>
                                <td style="position:relative">
                                    <input data-disable-default="True" data-val="true" data-val-required="请输入新密码" id="NewPassword" maxlength="18" name="NewPassword" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" placeholder="密码需6到18位，且要包含大小写字母及数字" type="password" />
                                    <em>*</em><span></span>

                                    <div class="pwd-prompt"></div>

                                </td>
                            </tr>
                            <tr>
                                <td class="cell-title">确认密码：</td>
                                <td style="position:relative">
                                    <input data-val="true" data-val-equalto="“确认密码”和“新密码”不匹配。" data-val-equalto-other="*.NewPassword" data-val-required="请输入确认密码" id="ConfirmPassword" maxlength="18" name="ConfirmPassword" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" placeholder="请再次输入新密码" type="password" />
                                    <em>*</em><span></span>

                                </td>
                            </tr>
                            <tr>
                                <td class="cell-title"></td>
                                <td>
                                    <div class="operate-panel">
                                        <a id="btnSubmit" class="ui-btn ui-btn-orange-l" href="javascript:void(0)">确认修改</a>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>

            </div>

            <!--修改信息-->
            <div class="information  hide" id="info3">
                <h2>修改信息</h2>
                <div class="mod information-changeuser">
                    <form id="myinfo">
                        <table width="100%">
                            <tbody>
                            <tr>
                                <td class="cell-title" width="35%">用户名：</td>
                                <td style="position:relative">
                                    <input type="text" class="username"/>
                                    <em></em>
                                    <span class="usernameTip msgTip"></span>
                                </td>
                            </tr>

                            <tr>
                                <td class="cell-title" width="35%">手机号：</td>
                                <td style="position:relative">
                                    <input type="text" class="usertel"/>
                                    <em></em>
                                    <span class="useretelTip msgTip"></span>
                                </td>
                            </tr>

                            <tr>
                                <td class="cell-title" width="35%">邮箱：</td>
                                <td style="position:relative">
                                    <input type="text" class="useremail"/>
                                    <em></em>
                                    <span class="useremailTip msgTip"></span>
                                </td>
                            </tr>

                            <tr>
                                <td class="cell-title" width="35%">真实姓名：</td>
                                <td style="position:relative">
                                    <input type="text" class="usernamezx"/>
                                    <em></em>
                                    <span></span>
                                </td>
                            </tr>

                            <tr>
                                <td class="cell-title" width="35%">身份证号码：</td>
                                <td style="position:relative">
                                    <input type="text" class="useridcardIpt"/>
                                    <em></em>
                                    <span></span>
                                </td>
                            </tr>

                            <tr>
                                <td class="cell-title" width="35%">性别：</td>
                                <td style="position:relative">
                                    <input type="radio" name="gender" value="M" checked class="gerderBtn"><label class="gerderTip">男性</label>
                                    <input type="radio" name="gender" value="F" class="radioBtn gerderBtn"><label class="gerderTip">女性</label>
                                    <em></em>
                                    <span></span>
                                </td>
                            </tr>

                            <tr>
                                <td class="cell-title" width="35%">出生日期：</td>
                                <td style="position:relative">
                                    <input type="date" class="userdate" />
                                    <em></em>
                                    <span></span>
                                </td>
                            </tr>

                            <tr>
                                <td class="cell-title"></td>
                                <td>
                                    <div class="operate-panel">
                                        <a id="Submit" class="ui-btn ui-btn-orange-l" href="javascript:void(0)">保存修改</a>
                                    </div>
                                </td>
                            </tr>


                            </tbody>
                        </table>
                    </form>
                </div>
            </div>

            <!--我的优惠券-->
            <div class="information  hide" id="info4">
                <div class="preferential">
                    <!--    头部-->
                    <div class="preferential-head">
                        <h4>我的优惠编码</h4>
                    </div>
                    <!--    绑定优惠码-->
                    <div class="coupon-bind">
                        <p class="coupon-bind-tips">在此输入您的优惠编码，点击“绑定”后，
                            此优惠编码将自动绑定您的一嗨账户。下次租车时可选择优惠编码抵用租金。</p>
                        <div class="coupon-bind-panel">
                            <h3>优惠编码：</h3>
                            <input id="textPromotionCode" type="text" placeholder="请输入您的优惠编码" maxlength="10">
                            <i style="color: #ff0000;font-style: normal;display: inline-block;padding-right: 10px;">*</i>
                            <a id="btnBind" class="ui-btn ui-btn-orange-l" href="">绑定</a>
                        </div>
                    </div>
                    <div class="hd">
                        <i>自驾优惠</i>
                    </div>
                    <div id="divPromotions" class="mod coupon-list">
                        <table class="ui-table-list" width="100%">
                            <tbody>
                            <tr>
                                <th width="30%" class="row-first-cell">优惠券</th>
                                <th width="15%">到期时间</th>
                                <th width="15%">使用状态</th>
                                <th width="15%">使用规则</th>
                            </tr>

                            <tr>
                                <td class="row-first-cell" data-content="1、自绑定日起2个月有效，租期满足2天及以上，租期包含任意法定节假日（含公休及调休）及前一天不能使用；&lt;br/&gt;2、适用于经济或舒适车型，仅限非首次取车订单可用，仅减免订单中最低一日的车辆租赁费及门店服务费，最高可减200元，其他费用正常收取； &lt;br/&gt;3、不可与一嗨其他优惠共享，不可重复使用，仅限一嗨国内自驾业务使用；&lt;br/&gt;4、奖品仅限本人使用，不可转让。">
                                    200元优惠券-1088礼包             </td>
                                <td> 2022-10-18</td>
                                <td>
                                    <span class="green bold">未使用</span>

                                </td>

                                <td class="btn-show-rules">
                                    <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal">使用规则</a>
                                    <script type="text/html">
                                        <li>
                                            1、自绑定日起2个月有效，租期满足2天及以上，租期包含任意法定节假日（含公休及调休）及前一天不能使用；<br/>2、适用于经济或舒适车型，仅限非首次取车订单可用，仅减免订单中最低一日的车辆租赁费及门店服务费，最高可减200元，其他费用正常收取； <br/>3、不可与一嗨其他优惠共享，不可重复使用，仅限一嗨国内自驾业务使用；<br/>4、奖品仅限本人使用，不可转让。
                                        </li>
                                    </script>
                                </td>
                            </tr>
                            <tr>
                                <td class="row-first-cell" data-content="1.生日优惠券使用有效期为生日之日起60天有效；&lt;br/&gt;2.仅对车辆租赁费及门店服务费部分进行减免，其他费用正常收取；&lt;br/&gt;3.一年内仅可享受一次生日优惠，不可与其他优惠同享，租期包含任意法定节假日（含公休及调休）及前一天不能使用 ；&lt;br/&gt;4.仅限一嗨国内自驾业务使用。">
                                    普卡生日优惠             </td>
                                <td> 2022-10-27</td>
                                <td>
                                    <span class="green bold">未使用</span>

                                </td>

                                <td class="btn-show-rules">
                                    <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal">使用规则</a>
                                    <script type="text/html">
                                        <li>
                                            1.生日优惠券使用有效期为生日之日起60天有效；<br/>2.仅对车辆租赁费及门店服务费部分进行减免，其他费用正常收取；<br/>3.一年内仅可享受一次生日优惠，不可与其他优惠同享，租期包含任意法定节假日（含公休及调休）及前一天不能使用 ；<br/>4.仅限一嗨国内自驾业务使用。
                                        </li>
                                    </script>
                                </td>
                            </tr>
                            <tr>
                                <td class="row-first-cell" data-content="1、新用户注册后，首单租期满2天及以上可使用该优惠，预订订单租期小于2天，续租后租期≥2天的订单，不享受该优惠；&lt;br/&gt;2、订单第一天车辆租赁费及门店服务费低于100元的减免第一天车辆租赁费及门店服务费费用，订单第一天车辆租赁费及门店服务费高于100元的最高抵扣车辆租赁费及门店服务费100元，其他费用正常收取；&lt;br/&gt;3、优惠券自绑定日起3个月有效，不可重复使用，限新用户本人使用，不与一嗨租车其他优惠活动并用，仅限一嗨租车国内自驾业务使用；&lt;br/&gt;4、新用户指同一账户在一嗨从未有过成功订单（非取消状态的订单）的用户，同一身份证下通过任意手机号注册的账户均属于同一账户。">
                                    一嗨新用户首单立减100元             </td>
                                <td> 2022-11-17</td>
                                <td>
                                    <span class="green bold">未使用</span>

                                </td>

                                <td class="btn-show-rules">
                                    <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal">使用规则</a>
                                    <script type="text/html">
                                        <li>
                                            1、新用户注册后，首单租期满2天及以上可使用该优惠，预订订单租期小于2天，续租后租期≥2天的订单，不享受该优惠；<br/>2、订单第一天车辆租赁费及门店服务费低于100元的减免第一天车辆租赁费及门店服务费费用，订单第一天车辆租赁费及门店服务费高于100元的最高抵扣车辆租赁费及门店服务费100元，其他费用正常收取；<br/>3、优惠券自绑定日起3个月有效，不可重复使用，限新用户本人使用，不与一嗨租车其他优惠活动并用，仅限一嗨租车国内自驾业务使用；<br/>4、新用户指同一账户在一嗨从未有过成功订单（非取消状态的订单）的用户，同一身份证下通过任意手机号注册的账户均属于同一账户。
                                        </li>
                                    </script>
                                </td>
                            </tr>
                            <tr>
                                <td class="row-first-cell" data-content="1、自绑定日起6个月有效，单笔订单车辆租赁费及门店服务费部分满800元可用，仅减免车辆租赁费及门店服务费部分，其他费用正常收取；&lt;br/&gt;2、租期包含任意法定节假日（含公休及调休）及前一天不能使用，不可与一嗨其他优惠共享，仅限一嗨国内自驾业务使用。">
                                    满800减88元优惠券-1088礼包</td>
                                <td> 2023-02-15</td>
                                <td>
                                    <span class="green bold">未使用</span>

                                </td>

                                <td class="btn-show-rules">
                                    <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal">使用规则</a>
                                    <script type="text/html">
                                        <li>
                                            1、自绑定日起6个月有效，单笔订单车辆租赁费及门店服务费部分满800元可用，仅减免车辆租赁费及门店服务费部分，其他费用正常收取；<br/>2、租期包含任意法定节假日（含公休及调休）及前一天不能使用，不可与一嗨其他优惠共享，仅限一嗨国内自驾业务使用。
                                        </li>
                                    </script>
                                </td>
                            </tr>
                            <tr>
                                <td class="row-first-cell" data-content="1.仅限新用户使用；仅限经济/舒适型车型可用；&lt;br/&gt;2.优惠券有效期以实际显示为准，租期包含任意法定节假日（含公休及调休）及前一天不能使用；&lt;br/&gt;3. 仅减免订单车辆租赁费及门店服务费部分，其他费用正常收取；&lt;br/&gt;4. 该券不兑现、不找零、不可叠加使用，不与其他优惠同享；&lt;br/&gt;5. 领取成功后不更换、退还。">
                                    车型试驾50元优惠券             </td>
                                <td> 2022-08-29</td>
                                <td>
                                    <span class="gray bold">已过期</span>

                                </td>

                                <td class="btn-show-rules">
                                    <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal">使用规则</a>
                                    <script type="text/html">
                                        <li>
                                            1.仅限新用户使用；仅限经济/舒适型车型可用；<br/>2.优惠券有效期以实际显示为准，租期包含任意法定节假日（含公休及调休）及前一天不能使用；<br/>3. 仅减免订单车辆租赁费及门店服务费部分，其他费用正常收取；<br/>4. 该券不兑现、不找零、不可叠加使用，不与其他优惠同享；<br/>5. 领取成功后不更换、退还。
                                        </li>
                                    </script>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                        <div class="ui-page">
                            <div class="pages">
                                <a href="javascript:void(0)" class="on" data-page-index="1">1</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><img src="../images/btn-myshow-close.png"></button>
                                <h4 class="modal-title" id="myModalLabel"></h4>
                            </div>
                            <div class="modal-body">
                                <div class="alert-rulebox">
                                    <h3>使用规则：</h3>
                                    <ol class="alert-rulebox-rules">
                                        <li>
                                            "1、自绑定日起2个月有效，租期满足2天及以上，租期包含任意法定节假日（含公休及调休）及前一天不能使用；<br>
                                            2、适用于经济或舒适车型，仅限非首次取车订单可用，仅减免订单中最低一日的车辆租赁费及门店服务费，最高可减200元，其他费用正常收取；<br>
                                            3、不可与一嗨其他优惠共享，不可重复使用，仅限一嗨国内自驾业务使用；<br>
                                            4、奖品仅限本人使用，不可转让。"
                                        </li>
                                    </ol>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <a href="../index.html" class="common-orgbtn rule-btn">立即使用</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


            <!--订单信息-->
            <div class="information hide" id="info5">
                <ul class="nav nav-tabs" id="myTab">
                    <li class="active" style="font-weight: bolder"><a href="#d1" data-toggle="tab">全部订单</a></li>
                    <li style="font-weight: bolder"><a href="#d2"  data-toggle="tab">预约中</a></li>
                    <li style="font-weight: bolder"><a href="#d3"  data-toggle="tab">租凭中</a></li>
                    <li style="font-weight: bolder"><a href="#d4"  data-toggle="tab">已完成</a></li>
                    <li style="font-weight: bolder"><a href="#d5"  data-toggle="tab">已取消</a></li>
                </ul>



                <div class="tab-content information-index">
                    <div id="d1" class="tab-pane active">
                        <table >
                            <tr class="row1">
                                <td>订单编号</td>
                                <td>车型</td>
                                <td>取车时间</td>
                                <td>还车时间</td>
                                <td>订单状态</td>
                            </tr>
                            <tr>
                                <td><a class="order_exchange" href="javascript:void(0)">1234567891</a></td>
                                <td>本田凌派/三厢 /自动 /1.0T</td>
                                <td>2022/9/4 9:00:00</td>
                                <td>2022/9/6 9:00:00</td>
                                <td>已取消</td>
                            </tr>
                            <tr>
                                <td><a class="order_exchange" href="javascript:void(0)">1234567891</a></td>
                                <td>本田凌派/三厢 /自动 /1.0T</td>
                                <td>2022/9/4 9:00:00</td>
                                <td>2022/9/6 9:00:00</td>
                                <td>已取消</td>
                            </tr>
                            <tr>
                                <td><a class="order_exchange" href="javascript:void(0)">1234567891</a></td>
                                <td>本田凌派/三厢 /自动 /1.0T</td>
                                <td>2022/9/4 9:00:00</td>
                                <td>2022/9/6 9:00:00</td>
                                <td>已取消</td>
                            </tr>
                        </table>
                    </div>
                    <div id="d2"  class="tab-pane" >
                        您还没有订单，现在就去订车吧！
                    </div>
                    <div id="d3"  class="tab-pane" >
                        您还没有订单，现在就去订车吧！
                    </div>
                    <div id="d4"  class="tab-pane" >
                        您还没有订单，现在就去订车吧！
                    </div>
                    <div id="d5"  class="tab-pane" >
                        您还没有订单，现在就去订车吧！
                    </div>

                </div>
            </div>

            <!--订单信息-->
            <div class="information hide" id="info6">
                <div class="order_information">
                    <h1>已取消</h1>
                    <hr>
                    <p>
                        订单号 ：<span>1234567890</span> &ensp; | &ensp;
                        租车人：<span>王璐瑶</span> &ensp; | &ensp;
                        支付方式：<span>在线支付</span> &ensp; |
                    </p>
                </div>
                <div class="order_car_details">
                    <div class="car_picture">
                        <img src="../images/order_img/car_dazhong.png">
                        <p>租期：<span class="day">2</span>天</p>
                    </div>
                    <div class="order_car_describe">
                        <div class="car_name">
                            <p>大众/自动/三厢/1.0T</p>

                        </div>
                        <div class="car_address">
                            <table >
                                <tr>
                                    <td class="address_a">取车地点</td>
                                    <td class="address_a">还车地点</td>
                                </tr>
                                <tr>
                                    <td>取车门店:<span>八万人体育场店</span></td>
                                    <td>还车门店:<span>八万人体育场店</span></td>
                                </tr>
                                <tr>
                                    <td>取车时间：<span>2022-08-27 09:00</span></td>
                                    <td>还车时间:<span>2022-08-29 09:00</span></td>
                                </tr>
                                <tr>
                                    <td>取车地址：<span>上海上海市徐汇区斜土路2899号</span></td>
                                    <td>还车地址：<span>上海上海市徐汇区斜土路2899号</span></td>
                                </tr>

                            </table>
                        </div>



                    </div>
                </div>
                <div class="order_pay">
                    <h3>费用明细</h3>
                </div>
                <div class="order_pay_">
                    <ul>
                        <li>
                            <p>车辆租赁费及门店服务费 (原价：276.00元，折扣优惠：0.00元)
                                <span class="price1">¥<span>276.00</span></span>
                            </p>
                        </li>
                        <li>
                            <p>基本保障服务费 (原价：100.00元，折扣优惠：0.00元)
                                <span class="price2">¥<span>100.00</span></span>
                            </p>
                        </li>
                        <li>
                            <p>其它服务费
                                <span class="price3">¥<span>20.00</span></span>
                            </p>
                        </li>
                        <li>
                            <p>手续费
                                <span class="price4">¥<span>20.00</span></span>
                            </p>
                        </li>
                        <li>
                            <p>优惠折扣
                                <span class="price5">¥<span>-0.00</span></span>
                            </p>
                        </li>
                        <li>
                            <h3>总计：<span>￥<span>396.0</span></span></h3>
                        </li>
                        <li>
                            <h4>已支付：<span>￥<span>0.0</span></span></h4>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

    </div>
</div>



<script src="../js/customer_center.js"></script>
<script src="../js/preferential.js"></script>
</body>
</html>